<template>
    <div class="login-wrapper">
        <div class="login-wrapper">
            <div class="content">
                <h3 style="text-align: center;">CRM后台管理系统</h3>
                <el-form
                        ref="ruleFormRef"
                        style="max-width: 600px"
                        :model="ruleForm"
                        status-icon
                        :rules="rules"
                        label-width="auto"
                        class="demo-ruleForm"
                >
                    <el-form-item label="账号" prop="pass">
                        <el-input v-model="ruleForm.pass" autocomplete="off"/>
                    </el-form-item>
                    <el-form-item label="密码" prop="pwd">
                        <el-input v-model="ruleForm.pwd" type="password"/>
                    </el-form-item>
                    <el-form-item>
                        <div style="display: flex;justify-content: right">
                            <el-button type="primary" @click="submitForm(ruleFormRef)">提交</el-button>
                            <el-button @click="resetForm(ruleFormRef)">重置</el-button>
                        </div>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<style lang="scss">
    .login-wrapper{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100vw;
        height: 100vh;
        background-color: #545c64;
        .content{
            width: 400px;
            padding: 50px;
            background-color: #fff;
            border-radius: 4px;
            box-shadow: 0px 0px 10px 3px #c7c9cb4d;
            .title{
                text-align: center;
                font-size: 20px;
                line-height: 1.5;
                margin-bottom: 20px;
            }
            .btn{
                width: 100%;
            }
        }
        h3{
            margin-bottom: 10px;
        }
    }
</style>

<script  lang="ts" setup>
    import { reactive, ref } from 'vue'
    import type { FormInstance, FormRules } from 'element-plus'
    import { ElMessage } from 'element-plus'
    import { userApi } from '../utils/api.js'

    import { userInfoStore } from '../store/user.js'
    import Router from "../router/index";

    const ruleFormRef = ref<FormInstance>()

    //验证账号
    const validatePass = (rule: any, value: any, callback: any) => {
        if (value === '') {
            callback(new Error('请输入账号'))
        } else {
            if (ruleForm.checkPass !== '') {
                if (!ruleFormRef.value) return
            }
            callback()
        }
    }
    //验证密码
    const validatePwd = (rule: any, value: any, callback: any) => {
        if (!value) {
            return callback(new Error('请输入密码'))
        }
        setTimeout(() => {
            if (value.length < 6) {
                callback(new Error('密码长度必须大于6位'))
            } else {
                callback()
            }
        }, 500)
    }

    //初始化数据
    const ruleForm = reactive({
        pass: '',
        pwd: '',
    })

    //定义规则
    const rules = reactive<FormRules<typeof ruleForm>>({
        pass: [{ validator: validatePass, trigger: 'blur' }],
        pwd: [{ validator: validatePwd, trigger: 'blur' }],
    })

    //提交
    const submitForm = (formEl: FormInstance | undefined) => {
        formEl.validate((valid) => {
            if (valid) {//所有验证通过
                //todo后台验证
                // ElMessage.success('验证通过')
                console.log(ruleForm)
                login();
            }
        })
    }

    //重置
    const resetForm = (formEl: FormInstance | undefined) => {
        if (!formEl) return
        formEl.resetFields()
    }

    //登录事件
    function login() {
        userApi.login(ruleForm).then(res=>{
            if (res) {//表示后台验证通过
                if (res.token) {
                    ElMessage.success('登录成功');
                    setTimeout(function () {
                        const store = userInfoStore()
                        //更新全局登录信息
                        store.token = res.token;
                        store.userName = res.userName;
                        //跳转到首页
                        Router.push('/')
                    },500)
                }
            }
        })
    }

    //键盘事件
    document.addEventListener("keydown", function(event) {
        if (event.key === "Enter") {//按下了ENTER键
            login();
        }
    });
</script>